<template>
  <div class="main">
    <div class="top">
      <a href="/"> <img src="../assets/images/logo (1).png" alt=""></a>
      <div>
        <!-- |  |  | -->
        <a href="#"> 暂存书架（0） </a>
        <a href="/manage">我的图书馆</a>
        <a href="/login" v-if="user.token===undefined">读者登录</a>
        <a href="javascript:;" v-if="user.token!==undefined" @click="logout">读者注销</a>
        <a href="#">帮助文档</a>
      </div>
    </div>
    <header>

      <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" >
        <el-menu-item index="1">
          <a href="/" target="_blank">首页</a>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            菜单</template>
<el-menu-item index="2-1">
    <a href="/share">简介</a>
</el-menu-item>
<el-menu-item index="2-2">
    <a href="/share/share2">开放时间</a>
</el-menu-item>
<el-menu-item index="2-3"> <a style="text-align: center;" href="/share/share3">入馆须知</a></el-menu-item>
<el-menu-item index="2-4"> <a href="/share/share4">借还规则</a></el-menu-item>
<el-menu-item index="2-5"> <a href="/share/share5">校外读者</a></el-menu-item>
<el-menu-item index="2-5"> <a href="/share/share5">联系我们</a></el-menu-item>

</el-submenu>
<el-menu-item index="3"><a href="/gathering">活动</a></el-menu-item>
<el-menu-item index="4"><a href="/publish">查看书籍</a></el-menu-item>
<el-menu-item index="5"><a href="/article">文章</a></el-menu-item>
<el-menu-item index="6"><a href="/message">信箱</a></el-menu-item>
</el-menu>

</header>
<nuxt />



<footer>
    <div class="footer">
        <p>江西软件职业技术大学 信息中心 版权所有</p>
        <p> 学院地址：江西省南昌市湾里区先锋创客小镇 邮编：330041 </p>
        <p> 电话：0791-83792888 传真：0791-83792966</p>
    </div>
</footer>
</div>
</template>
<script>
    import userApi from '@/api/login'
    import {
        getUser,
        removeUser
    } from '@/utils/auth'
    import '~/assets/css/base.css'
    export default {
        data() {
            return {
                activeIndex: '1',
                user: {},
                activeIndex: '1',
                activeIndex2: '1',
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

            logout() {
                // userApi.logout().then(res => {})
                removeUser() //清除登陆用户信息
                location.href = '/'
            }
        },
        created() {
            this.user = getUser()

        },
    }
</script>
<style>
    .main {
        box-sizing: border-box;
        background-color: #f5f5f5;
        overflow: hidden;
    }

    .top {
        background: #ffffff;
        min-height: 160px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .top img {
        display: inline-block;
        background-color: #ffffff;
    }

    .top div a {
        color: #666666;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        font-weight: normal;
        display: inline-block;
        height: 40px;
        margin: 0 10px;
    }

    header {
        height: 42px;
        /* background: #872baa; */
        /* background-color: pink; */
        margin: 0 auto;
        width: 1200px;
        padding-bottom: 50px;
    }

    .el-menu {
        background-color: #f5f5f5;
    }

    header ul {
        display: flex;
    }

    header ul li {
        flex: 1;
        line-height: 42px;
        text-align: center;
    }

    header ul li a {
        font-size: 16px;
        color: white;
        font-weight: bold;
    }

    footer {
        height: 157px;
        background-color: #f3f3f3;
    }

    .footer {
        width: 1200px;
        margin: 0 auto;
        padding-top: 20px;
    }

    .active {
        background-color: green;
        height: 80%;
    }
</style>
